<template>
  <div class="main">
    <div class="menu">
      <div class="user_info">
        <div class="auatar">
          <img src="../../src/static/home/1684459754075.jpg" alt="">
        </div>
        <div class="user">
          <p>welcome</p>
          <p :username="username">{{ username }}</p>
        </div>
        <div class="close" @click="deleteUser">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="tabs">
        <div
          v-for="item,i in tabs"
          :key="i"
          @click="click_tab(i,item.path)"
          :class="['tb_item',active==i?'active':'']">
          {{ item.name }}
        </div>
        <!-- <div class="tb_item active">Home</div>
        <div class="tb_item">Classify</div>
        <div class="tb_item">Search</div>
        <div class="tb_item">analyze</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "XMain",
  data() {
    return {
      active: 0,
      username:localStorage.username,
      tabs: [
        { name: 'Home', path: '/index/home' },
        { name: 'Classify', path: '/index/classify' },
        { name: 'Search', path: '/index/search' },
        { name: 'analyze', path: '/index/analyze' },
      ]
    }
  },

  created() {
    this.tabs.forEach((item,i)=> {
      if (this.$route.path == item.path) {
        this.active = i;
      }
    })
  },

  methods: {
    click_tab(i,path) {
      if (i!==this.active) {
        this.active = i;
        this.$router.push(path)
      }
    },
    async deleteUser(){
      let data={
        username:localStorage.username,
        password:localStorage.password
      }
      const resp=await this.$http.post('/user/cancellation',data)
      console.log("dete",resp)
      if(resp.data.state==true){
        this.$message.success("注销成功")
        this.$router.push("/")
      }else{
        this.$message.error(resp.data.message)
      }
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  .menu {
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), #D9D9D9;
    width: 327px;
    .tabs {
      /* Rectangle 5 */
      .tb_item {
        text-align: center;
        line-height: 92px;
        height: 92px;
        background: rgba(30, 22, 22, 0.9);
        border-radius: 12px 0 0 12px;
        color: #fff;
        font-weight: 400;
        font-size: 36px;
        margin: 30px 0;
        margin-left: 100px;
        color: rgb(204,204,204);
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        cursor: pointer;
      }
      .active {
        color: #fff;
        background: rgb(109,96,96)
      }
    }
    .user_info {
      display: flex;
      align-items: center;
      padding: 20px;
      .auatar {
        font-size: 0;
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }
      .user {
        color: #fff;
        flex: 1;
        p {
          text-align: center;
          padding: 0;
          margin: 0;
          font-weight: 400;
          font-size: 32px;
        }
      }
    }
  }
  .close{
    color: #D9D9D9;
    cursor: pointer;
  }
}
</style>